import { APP_NAME } from '@/globals';
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

/***
 * element-plus 的所有样式
 * color-scheme: light;
 * --el-color-white: #ffffff;
 * --el-color-black: #000000;  
 * --el-color-primary: #409eff;  // 主要色
 * --el-color-primary-light-3: #79bbff;
 * --el-color-primary-light-5: #a0cfff;
 * --el-color-primary-light-7: #c6e2ff;
 * --el-color-primary-light-8: #d9ecff;
 * --el-color-primary-light-9: #ecf5ff;
 * --el-color-primary-dark-2: #337ecc;
 * --el-color-success: #67c23a;  // 辅助色-成功
 * --el-color-success-light-3: #95d475;
 * --el-color-success-light-5: #b3e19d;
 * --el-color-success-light-7: #d1edc4;
 * --el-color-success-light-8: #e1f3d8;
 * --el-color-success-light-9: #f0f9eb;
 * --el-color-success-dark-2: #529b2e;
 * --el-color-warning: #e6a23c;  // 辅助色-警告
 * --el-color-warning-light-3: #eebe77;
 * --el-color-warning-light-5: #f3d19e;
 * --el-color-warning-light-7: #f8e3c5;
 * --el-color-warning-light-8: #faecd8;
 * --el-color-warning-light-9: #fdf6ec;
 * --el-color-warning-dark-2: #b88230;
 * --el-color-danger: #f56c6c;  // 辅助色-危险
 * --el-color-danger-light-3: #f89898;
 * --el-color-danger-light-5: #fab6b6;
 * --el-color-danger-light-7: #fcd3d3;
 * --el-color-danger-light-8: #fde2e2;
 * --el-color-danger-light-9: #fef0f0;
 * --el-color-danger-dark-2: #c45656;
 * --el-color-error: #f56c6c;  // 辅助色-错误
 * --el-color-error-light-3: #f89898;
 * --el-color-error-light-5: #fab6b6;
 * --el-color-error-light-7: #fcd3d3;
 * --el-color-error-light-8: #fde2e2;
 * --el-color-error-light-9: #fef0f0;
 * --el-color-error-dark-2: #c45656;
 * --el-color-info: #909399;  // 中性色
 * --el-color-info-light-3: #b1b3b8;
 * --el-color-info-light-5: #c8c9cc;
 * --el-color-info-light-7: #dedfe0;
 * --el-color-info-light-8: #e9e9eb;
 * --el-color-info-light-9: #f4f4f5;
 * --el-color-info-dark-2: #73767a;
 * --el-bg-color: #ffffff;  // 背景色 - 主要
 * --el-bg-color-page: #f2f3f5;  // 背景色 - 页面
 * --el-bg-color-overlay: #ffffff; // 背景色 - 覆盖层
 * --el-text-color-primary: #303133;  // 文本颜色 - 主要
 * --el-text-color-regular: #606266;  // 文本颜色 - 常规
 * --el-text-color-secondary: #909399;  // 文本颜色 - 次要
 * --el-text-color-placeholder: #a8abb2;  // 文本颜色 - 提示
 * --el-text-color-disabled: #c0c4cc;  // 文本颜色 - 禁用
 * --el-border-color: #dcdfe6;  // 边框颜色
 * --el-border-color-light: #e4e7ed;
 * --el-border-color-lighter: #ebeef5;
 * --el-border-color-extra-light: #f2f6fc;
 * --el-border-color-dark: #d4d7de;
 * --el-border-color-darker: #cdd0d6;
 * --el-fill-color: #f0f2f5;
 * --el-fill-color-light: #f5f7fa;
 * --el-fill-color-lighter: #fafafa;
 * --el-fill-color-extra-light: #fafcff;
 * --el-fill-color-dark: #ebedf0;
 * --el-fill-color-darker: #e6e8eb;
 * --el-fill-color-blank: #ffffff;
 * --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
 * --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
 * --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
 * --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
 * --el-disabled-bg-color: var(--el-fill-color-light);
 * --el-disabled-text-color: var(--el-text-color-placeholder);
 * --el-disabled-border-color: var(--el-border-color-light);
 * --el-overlay-color: rgba(0, 0, 0, 0.8);
 * --el-overlay-color-light: rgba(0, 0, 0, 0.7);
 * --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
 * --el-mask-color: rgba(255, 255, 255, 0.9);
 * --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
 * --el-border-width: 1px;
 * --el-border-style: solid;
 * --el-border-color-hover: var(--el-text-color-disabled);
 * --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
 * --el-svg-monochrome-grey: var(--el-border-color);
 */

export const themeStyleList = [
  { label: '亮白', value: 'light' },
  { label: '暗黑', value: 'dark' },
  { label: '跟随系统', value: 'service' },
]

export const themePrimaryList = [
  { label: '科技', value: 'rgb(22, 119, 255)' },
  { label: '拂晓', value: 'rgb(24, 144, 255)' },
  { label: '薄暮', value: 'rgb(245, 34, 45)' },
  { label: '火山', value: 'rgb(250, 84, 28)' },
  { label: '日暮', value: 'rgb(250, 173, 20)' },
  { label: '明青', value: 'rgb(19, 194, 194)' },
  { label: '极光', value: 'rgb(82, 196, 26)' },
  { label: '极客', value: 'rgb(47, 84, 235)' },
  { label: '酱紫', value: 'rgb(114, 46, 209)' },
  { label: '深海', value: 'rgb(0, 26, 51)' },
  { label: '冬灰', value: 'rgb(128, 128, 128)' },
  { label: '玫瑰', value: 'rgb(255, 20, 147)' },
  { label: '宝石', value: 'rgb(0, 103, 163)' },
  { label: '橄榄', value: 'rgb(0, 100, 0)' },
  { label: '珊瑚', value: 'rgb(255, 127, 80)' },
  { label: '薰衣草', value: 'rgb(147, 112, 219)' },
  { label: '石墨', value: 'rgb(25, 25, 25)' },
  { label: '森林', value: 'rgb(34, 139, 34)' },
  { label: '天际', value: 'rgb(135, 206, 235)' },
  { label: '夜空', value: 'rgb(36, 41, 46)' },
  { label: '砖红', value: 'rgb(178, 34, 34)' },
  { label: '薄荷', value: 'rgb(0, 255, 127)' },
  { label: '星际', value: 'rgb(0, 0, 128)' },
  { label: '热带', value: 'rgb(255, 149, 0)' },
  { label: '紫罗兰', value: 'rgb(128, 0, 128)' },
  { label: '翠绿', value: 'rgb(0, 255, 64)' },
  { label: '沙漠', value: 'rgb(255, 215, 0)' },
  { label: '伯爵', value: 'rgb(77, 88, 99)' },
]

/**
 * 创建两种颜色之间的混合色。
 * @param color1 第一种颜色值。
 * @param color2 第二种颜色值。
 * @param ratio 混合比例（0 到 1 之间）。
 * @returns 返回混合后的颜色值。
 */
function mix(color1:string, color2:string, ratio:number) {
  // 解析颜色值到RGB对象
  function parseColor(color:string) {
    if (color.startsWith('#')) {
      // 16进制颜色
      const r = parseInt(color.substring(1, 3), 16);
      const g = parseInt(color.substring(3, 5), 16);
      const b = parseInt(color.substring(5, 7), 16);
      return { r, g, b };
    } else if (color.startsWith('rgb')) {
      // RGB颜色
      const [r, g, b] = color.match(/\d+/g)!.map(Number);
      return { r, g, b };
    } else if (color.startsWith('hsl')) {
      // HSL颜色
      const [h, s, l] = color.match(/\d+/g)!.map(Number);
      const { r, g, b } = hslToRgb(h, s, l);
      return { r, g, b };
    } else {
      throw new Error('Unsupported color format');
    }
  }

  // HSL转RGB的辅助函数
  function hslToRgb(h:number, s:number, l:number) {
    let r, g, b;

    if (s === 0) {
      r = g = b = l; // achromatic
    } else {
      const hue2rgb = (p:number, q:number, t:number) => {
        if (t < 0) t += 1;
        if (t > 1) t -= 1;
        if (t < 1/6) return p + (q - p) * 6 * t;
        if (t < 1/2) return q;
        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
        return p;
      };

      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      const p = 2 * l - q;
      r = hue2rgb(p, q, h + 1/3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1/3);
    }

    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
  }

  // 解析两种颜色
  const c1 = parseColor(color1);
  const c2 = parseColor(color2);

  // 计算混合后的 RGB 值
  const mixedR = Math.round(c1.r * (1 - ratio) + c2.r * ratio);
  const mixedG = Math.round(c1.g * (1 - ratio) + c2.g * ratio);
  const mixedB = Math.round(c1.b * (1 - ratio) + c2.b * ratio);

  // 构建混合后的颜色值
  const mixedColor = `#${mixedR.toString(16).padStart(2, '0')}${mixedG.toString(16).padStart(2, '0')}${mixedB.toString(16).padStart(2, '0')}`;

  return mixedColor;
}

/**
 * 改变网页中特定元素的主题颜色。
 * @param e 选定的颜色值。
 */
export function changePrimaryColor(e: string): void {
  const pre = "--el-color-primary";
  const mixWhite = "#ffffff";
  const mixBlack = "#000000";
  const el = qiankunWindow.__POWERED_BY_QIANKUN__ ? document.querySelector(`div[data-qiankun="${APP_NAME}"]`) as HTMLElement : document.documentElement;

  // 设置主要颜色
  el.style.setProperty(pre, e);

  for (let i = 1; i < 10; i += 1) {
    // 设置不同明度的颜色值
    el.style.setProperty(`${pre}-light-${i}`, mix(e, mixWhite, i * 0.1));
  }

  // 设置较深的颜色值
  el.style.setProperty("--el-color-primary-dark", mix(e, mixBlack, 0.1));
}
